<template>
  <div class="centreLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-layer-group" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">节点数据</span>
          <dv-decoration-1 class="dv-dec-1" />
        </div>
      </div>
      <div class="d-flex jc-center" style="height: 100%;width: 100%;">
        <div v-if="count.length>0" class="cc-details">
          <div>节点总数</div>
          <div class="card"
               v-for="(item, index) in count"
               :key="index"
          >{{ item }}
          </div>
        </div>
        <map-node-draw :nodes="nodes" :nodeFlyTrailLines="nodeFlyTrailLines" />
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeUpdate, onUpdated, onBeforeUnmount, onBeforeMount, onMounted, onUnmounted } from 'vue'
import MapNodeDraw from './draw'
import {api} from "@/axios/api";
import {StorageLocal} from "@/storage/storage";
export default defineComponent({
  components: {
    MapNodeDraw
  },
  setup() {
    //
    /**
     * 没清空会无限增长
     * const nodes= reactive([]);
     *     nodes.push(...res.data.data)
     */
    //console.log("*******setup******")
    // 定义响应式数据 data
    const state= reactive({
      nodes: [],
      count: [0,0,0,0],
      nodeFlyTrailLines: []
    });
    //console.log("*******end reactive******")
    let intervalInstance = null
    // 定义方法
    const methods = {
      // ***********async/await 实现请求同步功能**************
      async refreshNodeData(){
        await api.nodes.nodes().then((res: any) => {
          if (res && res.data && res.data.code === 0) {
            if (res.data.data && res.data.data.length >0) {
              //console.log("mock length :"+res.data.data.length)
              //console.log(res.data.data)
              state.nodes=res.data.data
              methods.nodeCount ()
              res.data.data.forEach((node) => {
                if(node && node.ip){
                  StorageLocal.set("node-"+node.ip, node)
                }
              })
              methods.refreshNodeFlowData()
            }
          }
        })
      },
      async refreshNodeFlowData ()  {
        await api.nidtga.nodesFlow().then((res: any) => {
          if (res && res.data && res.data.code === 0) {
            if (res.data.data && res.data.data.length >0) {
              //console.log("mock length :"+res.data.data.length)
              //console.log(res.data.data)
              //aqua水绿色 #00FFFF
              //limeGreen酸橙绿 #32CD32 50,205,50
              //lime纯绿,草绿色 #00FF00 0,255,0
              const nodeFlyTrailLines = [];
              // 正常流量
              const normalFlyTrailLines = { lineColor: "#00FF00",lineCurveness: 0.2, lineDatas: [] }
             // 异常流量
              const abnormalFlyTrailLines = { lineColor: "orange",lineCurveness: 0.3, lineDatas: [] }
              res.data.data.forEach((flow) => {
                const  fromNode = StorageLocal.get("node-"+flow.sourceAddr);
                const  toNode = StorageLocal.get("node-"+flow.destinationAddr);
                if(fromNode && toNode){
                  if(fromNode["longitude"] && fromNode["latitude"] && toNode["longitude"] && toNode["latitude"]){
                    let coords = {
                      fromName: fromNode?fromNode["nodeName"]:"", //发射的省名，保存用于弹框显示
                      toName: toNode?toNode["nodeName"]:"",  //接收的省名，保存用于弹框显示
                      coords: [
                        [fromNode["longitude"],fromNode["latitude"]], //发射点
                        [toNode["longitude"],toNode["latitude"]], //接收点
                      ],
                      count: 0, //数据
                    }
                    if(flow.normalFlow && flow.normalFlow > 0){
                      coords.count = flow.normalFlow;
                      normalFlyTrailLines.lineDatas.push(coords)
                    }
                    if(flow.abnormalFlow  && flow.abnormalFlow > 0){
                      coords.count = flow.abnormalFlow;
                      abnormalFlyTrailLines.lineDatas.push(coords)
                    }
                  }
                }
              })
              if(normalFlyTrailLines.lineDatas.length >0 ){
                nodeFlyTrailLines.push(normalFlyTrailLines)
              }
              if(abnormalFlyTrailLines.lineDatas.length >0 ){
                nodeFlyTrailLines.push(abnormalFlyTrailLines)
              }
              state.nodeFlyTrailLines=nodeFlyTrailLines
            }
          }
        })
      },
      async changeTiming ()  {
        intervalInstance = setInterval(() => {
          methods.refreshNodeData()
        }, 5000)
      },
      async nodeCount ()  {
        if(state.nodes.length>0){
          state.count = [0,0,0,0]
          let num = state.nodes.length;
          //console.log("num:"+num)
          let i = 0;
          while (num){
            if(i<4){
              state.count[i]=Math.floor(num % 10);
            }else{
              state.count.push(Math.floor(num % 10))
            }
            i++;
            num =  Math.floor(num /10)
          }
          // 倒序排序
          state.count.reverse()
        }
      },
    }
    //console.log("*******end methods******")
    onBeforeMount(()=>{
      // dom 挂载前
      //console.log("*******onBeforeMount******")
    })
    onMounted(async()=>{
      //dom 挂载后
      //console.log("*******onMounted******")
      await methods.refreshNodeData()
      await methods.changeTiming()
    })
    onBeforeUpdate(()=>{
      //对响应式data数据有更新， 更新前
      //console.log("*******onBeforeUpdate******")
    })
    onUpdated(()=>{
      //对响应式data数据有更新， 更新后
      //console.log("*******onUpdated******")
    })
    onBeforeUnmount(()=>{
      //销毁页面组件前， 即关闭
      //console.log("*******onBeforeUnmount******")
    })
    onUnmounted(()=>{
      //销毁后
      //console.log("*******onUnmounted******")
    })



    onUnmounted(() => {
      clearInterval(intervalInstance)
    })
    //console.log("index")
    return {
      ...toRefs(state),
      ...methods,
    }
  }
})
</script>

<style lang="scss" scoped>
.centreLeft1 {
  padding: 5px;
  height: 100%;
  min-width: 100%;// 中间区域整体宽度
  border-radius: 5px;
  .bg-color-black {
    height: 100%;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .dv-dec-1 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }
  .chart-box {
    margin-top: 16px;
    width: 900px;
    height: 705px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
  .cc-details {
    right: 40%;
    top: 80px;
    overflow: hidden;
    z-index: 9999;
    position: fixed;
    text-align:center;
    height: 120px;
    display: flex;
    justify-content: center;
    font-size: 30px;
    align-items: center;

    .card {
      background-color: rgba(4, 49, 128, .6);
      color: #08e5ff;
      height: 60px;
      width: 60px;
      font-size: 45px;
      font-weight: bold;
      line-height: 60px;
      text-align: center;
      margin: 10px;
    }
  }
}
</style>
